<template>
    <div id="ContactListManage">
        <el-row  style="margin-bottom: 20px;">
            <el-col :span="1">
                <el-button type="primary" @click="dialogVisible = true,isUpdate=false">新增学员</el-button>
            </el-col>
        </el-row>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                    <td>学校</td>
                    <td>学历</td>
                    <td>电子邮箱</td>
                    <td>QQ</td>
                    <td>微信</td>
                    <td>
                      操作
                    </td>
                </tr>
                <tr v-for="(item,key) in dataSource" :key="key">
                    <td>{{item.sname}}</td>
                    <td>{{item.sage}}</td>
                    <td>{{item.sgender}}</td>
                    <td>{{item.schoolName}}</td>
                    <td>{{item.education}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.qq}}</td>
                    <td>{{item.wx}}</td>
                    <td>
                        <el-button
                        size="mini"
                        @click="handleEdit(key, item)"
                        >编辑</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(key, item)"
                        >删除</el-button>
                    </td>
                </tr>
            </tbody>
        </table>
        <el-dialog 
            title="新增学员"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose"
        >
            <table class="table table-bordered">
                <tbody>
                    <tr>
                        <td>姓名</td>
                        <td>
                            <!-- <el-input v-model="form.sname" ></el-input> -->
                            <input name="姓名" v-model="form.sname" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('姓名') }" type="text" placeholder="姓名">
                            <i v-show="errors.has('姓名')" class="fa fa-warning"></i>
                            <span v-show="errors.has('姓名')" class="help is-danger">{{ errors.first('姓名') }}</span>
                        </td>
                        <td>年龄</td>
                        <td>
                            <!-- <el-input v-model="form.sage" ></el-input> -->
                            <input name="年龄" v-model="form.sage" v-validate="'required|numeric'" :class="{'input': true, 'is-danger': errors.has('年龄') }" type="text" placeholder="年龄">
                            <i v-show="errors.has('年龄')" class="fa fa-warning"></i>
                            <span v-show="errors.has('年龄')" class="help is-danger">{{ errors.first('年龄') }}</span>
                        </td>
                    </tr>
                    <tr>
                        <!-- <td>性别</td>
                        <td>
                            <el-input v-model="form.sgender" ></el-input>
                        </td> -->
                        <td  >性别</td>
                        <td  style="text-align:left">
                            <el-switch
                            v-model="form.sgender"
                            style="display: block"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="男"
                            inactive-text="女">
                            </el-switch>

                        </td>
                        <td>学校名称</td>
                        <td>
                            <el-input v-model="form.schoolName"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>学历</td>
                        <td>
                            <el-select v-model="form.education" placeholder="请选择" @click.native="loadEducation()">
                                <el-option v-for="item in educations"
                                    :key= "item.kvalue"
                                    :label="item.kvalue"
                                    :value="item.kvalue"
                                >
                                </el-option>
                            </el-select>
                        </td>
                        <td>电话</td>
                        <td>
                            <!-- <el-input v-model="form.mobile"></el-input> -->
                            <p class="control has-icon has-icon-right">
                                <input name="电话" v-model="form.mobile" v-validate="'required|phone'" :class="{'input': true, 'is-danger': errors.has('电话') }" type="text" placeholder="电话">
                                <i v-show="errors.has('电话')" class="fa fa-warning"></i>
                                <span v-show="errors.has('电话')" class="help is-danger">{{ errors.first('电话') }}</span>
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <td>邮箱</td>
                        <td>
                            <!-- <el-input v-model="form.email"></el-input> -->
                            <p :class="{ 'control': true }">
                                <input  v-model="form.email" v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('邮箱') }" name="邮箱" type="text" placeholder="邮箱">
                                <span v-show="errors.has('邮箱')" class="help is-danger">{{ errors.first('邮箱') }}</span>
                            </p>
                        </td>
                        <td>QQ</td>
                        <td>
                            <el-input v-model="form.qq"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>微信</td>
                        <td>
                            <el-input v-model="form.wx"></el-input>
                        </td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
               
             <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addNewStudent" v-if="!isUpdate">确 定</el-button>
                <el-button type="primary" @click="updateStudentInfo" v-if="isUpdate">更新</el-button>
            </span>
        </el-dialog>
         <el-pagination
        background
        layout="prev, pager, next"
        :total="totalRecord"
        @current-change="currentChange">
        </el-pagination>
    </div>
</template>
<script>
export default {
    data(){
        return {
             dataSource: [],
             dialogVisible: false,
             totalRecord: 1,
             form: {
                 sname: '',
                 token: this.$token
             },
             educations: [],//学历列表
             isUpdate: false,
        }
    },
    methods: {
        handleDelete(index,row){
            // /backstage/school/delete
            var deleteURL = window.baseURL+ "/backstage/channelStudent/delete";
            var postData = {id: row.id,token: this.$token};
            this.$http.post(deleteURL,this.$qs.stringify(postData))
            .then((response)=>{
                this.loadData(1);
            })
            .catch((error)=>{
            })
        },
        handleEdit(index,row){
            this.isUpdate = true;
            this.dialogVisible = true;
            this.form = row;
        },
        currentChange(value){
            this.loadData(value);
        },
        updateStudentInfo(){
            // /backstage/channelStudent/update
            var updateURL = window.baseURL + "/backstage/channelStudent/update";
            this.form.token = this.$token;
            this.$http.post(updateURL,this.$qs.stringify(this.form))
            .then((res)=>{
                this.dialogVisible = false;
                this.loadData(1);
            })
            .catch((error)=>{
            })
        },
        handleClose(){
            this.dialogVisible = false;
        },
        addNewStudent(){
            //新增校园 /backstage/school/insert
            this.dialogVisible = false;
            var insertURL = window.baseURL + "/backstage/channelStudent/insert";
            this.form.token = this.$token;
            this.$http.post(insertURL,this.$qs.stringify(this.form))
            .then((response)=>{
                this.loadData(1);
            })
            .catch((error)=>{
            })
        },
        loadEducation(){
            var sourceURL = window.baseURL+"/backstage/config/findConfigs?ktype=education&token="+this.$token
            this.$http.get(sourceURL)
            .then((response)=>{
                this.educations = response.data.data;
            })
            .catch((error)=>{
            })
        },
        loadData(pageNum){
            //url  /backstage/classStudent/findByPage
            var studentURL = window.baseURL+"/backstage/channelStudent/findByPage?token="+this.$token+"&pageNum="+pageNum+"&pageSize=20";
            this.$http.get(studentURL)
            .then((response)=>{
                this.dataSource = response.data.data.list.results;
                this.totalRecord = response.data.data.list.totalRecord;
            })
            .catch((error)=>{
            })
        }
    },
    created(){
        this.loadData(1);
    }
}
</script>

<style lang="scss" scoped>
    #ContactListManage {
        width: 100%;
        padding: 40px;
        box-sizing: border-box;    
        position: absolute;    
        table {
            tr {
                td {
                    text-align: center;
                    vertical-align: middle;
                }
            }
        }
    }
</style>
